import React, { useState, useEffect } from 'react';
import { Layout, Menu, theme, Typography, Card, Row, Col } from 'antd';
import { 
  HomeOutlined,
  PictureOutlined,
  ScissorOutlined,
  FolderOpenOutlined,
  DatabaseOutlined
} from '@ant-design/icons';
import ImageTools from './components/ImageTools';
import ImageCropper from './components/ImageCropper';
import BatchImageCropper from './components/BatchImageCropper';
import FolderCleanup from './components/FolderCleanup';
import FolderHandler from './components/FolderHandler';
import './App.css';

const { Header, Content, Sider } = Layout;
const { Title } = Typography;

const App: React.FC = () => {
  const [selectedKey, setSelectedKey] = useState('home');
  
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  // 监听自定义导航事件
  useEffect(() => {
    const handleNavigate = (e: Event) => {
      const customEvent = e as CustomEvent;
      setSelectedKey(customEvent.detail);
    };

    window.addEventListener('navigate', handleNavigate);
    return () => {
      window.removeEventListener('navigate', handleNavigate);
    };
  }, []);

  const renderContent = () => {
    switch(selectedKey) {
      case 'image-tools':
        return <ImageTools />;
      case 'image-cropper':
        return <ImageCropper />;
      case 'batch-cropper':
        return <BatchImageCropper />;
      case 'folder-tools':
        return <FolderHandler />;
      case 'folder-cleanup':
        return <FolderCleanup />;
      case 'file-name-processor':
        return <FileNameProcessor />;
      default:
        return (
          <div style={{ padding: 24 }}>
            <Title level={2}>小程序集合平台</Title>
            <p>欢迎使用基于 Ant Design 和 Tauri 构建的小程序集合平台。</p>
            <p>请选择左侧菜单中的功能开始使用。</p>
            
            <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
              <Col span={8}>
                <Card title="图片处理工具" variant="outlined" hoverable>
                  <PictureOutlined style={{ fontSize: '2rem', color: '#1890ff' }} />
                  <p>专业的图片处理工具集，包括裁剪、压缩、旋转等功能</p>
                </Card>
              </Col>
              <Col span={8}>
                <Card title="文件夹处理工具" variant="outlined" hoverable>
                  <DatabaseOutlined style={{ fontSize: '2rem', color: '#52c41a' }} />
                  <p>文件和文件夹管理工具，包括清理、预览、导出等功能</p>
                </Card>
              </Col>
            </Row>
          </div>
        );
    }
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ display: 'flex', alignItems: 'center', backgroundColor: '#1890ff' }}>
        <div style={{ color: 'white', fontSize: '1.5rem', fontWeight: 'bold' }}>
          小程序集合平台
        </div>
      </Header>
      
      <Layout>
        <Sider width={200} style={{ background: colorBgContainer }}>
          <Menu
            mode="inline"
            defaultSelectedKeys={['home']}
            selectedKeys={[selectedKey]}
            style={{ height: '100%', borderRight: 0 }}
            items={[
                  {
                    key: 'home',
                    icon: <HomeOutlined />,
                    label: '首页',
                  },
                  {
                    key: 'image-tools',
                    icon: <PictureOutlined />,
                    label: '图片工具',
                    children: [
                      {
                        key: 'image-cropper',
                        icon: <ScissorOutlined />,
                        label: '图片裁剪',
                      },
                      {
                        key: 'batch-cropper',
                        icon: <ScissorOutlined />,
                        label: '批量裁剪',
                      }
                    ]
                  },
                  {
                    key: 'folder-tools',
                    icon: <DatabaseOutlined />,
                    label: '文件夹处理',
                    children: [
                      {
                      key: 'folder-cleanup',
                      icon: <FolderOpenOutlined />,
                      label: '文件夹清理',
                    },
                    {
                      key: 'file-name-processor',
                      icon: <FileTextOutlined />,
                      label: '文件名处理',
                    }
                    ]
                  },
                ]}
            onSelect={({ key }) => setSelectedKey(key)}
          />
        </Sider>
        
        <Layout style={{ padding: '0 24px 24px' }}>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            {renderContent()}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default App;